<template>
  <div>
    <aty-form>
      <aty-date-picker label="dataPicker" v-for="item in dataPickerItem" :key="item" type="date"></aty-date-picker>
      <aty-input label="input" v-for="item in inputItems" :key="item" value="测试"></aty-input>
      <aty-input-money label="inputMoney" v-for="item in inputMoneyItems" :key="item"></aty-input-money>
      <aty-input-number label="inputNumber" v-for="item in inputNumberItems" :key="item"></aty-input-number>
      <aty-radio-group label="性别" v-for="item in radioGroupItems" :key="item" :data-list="sexList"></aty-radio-group>
      <aty-checkbox-group
        v-for="item in checkBoxGroupItems"
        :key="item"
        :data-list="checkBoxList"
        label="请选择水果："
      ></aty-checkbox-group>
      <aty-select label="select" v-for="item in selectItems" :key="item" :data="cityList"></aty-select>
      <aty-select-tree
        label="selectTree"
        v-for="item in selectTreeItems"
        :key="item"
        :data="selectTreeData"
      ></aty-select-tree>
      <aty-textarea label="描述" v-for="item in textareaItems" :key="item"></aty-textarea>
      <aty-organ-tree
        v-for="item in organTreeItems"
        :key="item"
        select-type="all"
        select-scope="all"
      ></aty-organ-tree>
    </aty-form>
  </div>
</template>
<script>
  var length = 400;
  export default {
  data: function() {
    return {
      dataPickerItem: new Array(length),
      inputItems: new Array(length),
      inputMoneyItems: new Array(length),
      inputNumberItems: new Array(length),
      selectItems: new Array(length),
      selectTreeItems: new Array(length),
      radioGroupItems: new Array(length),
      checkBoxGroupItems: new Array(length),
      textareaItems: new Array(length),
      organTreeItems: new Array(length),
      cityList: (function(len){
        let data = []
        for (let i = 0; i < len; i++) {
          data.push({
          code: "beijing" + i,
          codeType: "beijing",
          name: "北京市" + i
        })
        }
        return data;
      })(20),
      selectTreeData: [],
      sexList: [
        {
          code: "1",
          codeType: "sex",
          name: "男"
        },
        {
          code: "2",
          codeType: "sex",
          name: "女"
        },
        {
          code: "3",
          codeType: "sex",
          name: "其他"
        }
      ],
      checkBoxList: [
        {
          code: "1",
          codeType: "fruit",
          name: "<em>苹果</em>"
        },
        {
          code: "2",
          codeType: "fruit",
          name: "香蕉"
        },
        {
          code: "3",
          codeType: "fruit",
          name: "梨"
        },
        {
          code: "4",
          codeType: "fruit",
          name: "橘子"
        }
      ]
    };
  },
  methods: {
    loadingData: function(len) {
      var _data = [];
      var k = 0;
      for (var i = 0; i < len; i++) {
        k++;
        _data.push({
          name: "一级 " + k,
          id: "" + k,
          disabled: k == 2 ? true : false,
          open: true,
          children: [
            {
              id: k + "-" + k,
              name: "二级 " + k + "-" + k,
              disabled: k == 2 ? true : false,
              children: [
                {
                  id: k + "-" + k + "-" + k,
                  disabled: k == 2 ? true : false,
                  name: "三级 " + k + "-" + k + "-" + k
                }
              ]
            }
          ]
        });
      }
      this.selectTreeData = _data;
    }
  },
  mounted: function() {
    this.loadingData(10);
  }
};
</script>
